<template>
  <div class="">
      <van-nav-bar
        class="app-nav-bar"
        title="事件上报"
      />

      <van-form @submit="onSubmit">
          <van-field
                v-model="form.reportingLocation"
                name="位置"
                label="位置"
                placeholder="位置"
                :rules="[{ required: true, message: '请填写位置' }]"
            />
            <van-field
                v-model="form.eventDesc"
                name="描述"
                label="描述"
                placeholder="描述"
                :rules="[{ required: true, message: '请填写描述' }]"
            />
            <van-field
                v-model="qualityContent"
                right-icon="arrow"
                label="质量内容"
                placeholder="请选择质量内容"
                @click="showqualityContentListShare=true"
            />
            <van-action-sheet 
                v-model="showqualityContentListShare"
                title="请选择"
                :actions="qualityContentList" 
                @select="onSelect1" 
            />
            <van-fieldt
                v-model="partsContent"
                right-icon="arrow"
                label="部件"
                placeholder="请选择部件内容"
                @click="showpartsListShare=true"
            />
            <van-action-sheet 
                v-model="showpartsListShare"
                title="请选择"
                :actions="partsContentList" 
                @select="onSelect2" 
            />
                <van-field
                    readonly
                    right-icon="arrow"
                    label="上传照片"
                    placeholder="请选择图片"
                    @click="chooseFile"
                />
            <van-uploader
              v-model="fileList"
              :after-read="afterRead"
              :max-count="1"
              ref="file"/>
            <!-- 提交 -->
            <div style="margin:16px">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
  </div>
</template>

<script>
import { Dialog,Toast } from 'vant';
export default {
    name:'addevent',
    data(){
        return{
            fileList: [],
            partsContentList:[],
            qualityContentList:[],
            form:{
                qualityId:null,
                qualityOptions:[],
                reportingLocation:"",
                userOptions:[],
                partsId:null,
                partsOptions:[],
                eventDesc:""
            },
            showqualityContentListShare:false,//显示质量内容
            showpartsListShare:false,//显示部件
            qualityContent:"",//记住弹出框的内容
            partsContent:"",
            file:null
        }
    },
    methods:{
        chooseFile(){
            this.$refs.file.chooseFile();//触发选择图片事件
        },
        async onSubmit(){
            this.uploadSectionFile();
        },
        async uploadSectionFile(){
            var form=new FormData();
            form.append("file",this.file);
            let reportpersonId=sessionStorage.getItem("set_token").split("-")[2];
            form.append("qualityId",this.form.qualityId);
            form.append("reportpersonId",reportpersonId);
            form.append("partsId",this.form.partsId);
            form.append("reportingLocation",this.form.reportingLocation);
            form.append("eventDesc",this.form.eventDesc);
            const {data:res} =await this.$axios({
                url:this.$location.addEvent,
                method:'post',
                headers:{
                    "Content-Type":"multipart/form-data"
                },
                data:form
            });
            console.log(res);
            if(res.status==200){
                // Toast.loading({
                //     message:res.msg,
                //     position:'top'
                // });
                this.$toast.success(res.msg)
                this.$router.push('/event');
            }else{
                // Toast.loading({
                //     message:res.msg,
                //     position:'top'
                // });
                
                this.$toast.fail(res.msg)
                this.$router.push('/event');
            }
        },
        onSelect1(item){
            this.qualityContent=item.name;
            this.form.qualityId=item.id
            this.showqualityContentListShare = false;
        },
        onSelect2(item){
            this.partsContent=item.name;
            this.form.partsId=item.id
            this.showpartsListShare = false;
        },
        async getQualityListAll(){//加载质量内容
            const {data:res} =await this.$axios({url:this.$location.getQualityListAll});
            console.log(res)
            res.data.forEach(item=>{
                this.qualityContentList.push({
                    id:item.id,
                    name:item.qualityContent
                })
            })
        },
        async getPartsListAll(){
            const {data:res} =await this.$axios({url:this.$location.getPartsListAll});
            console.log(res)
            res.data.forEach(item=>{
                this.partsContentList.push({
                    id:item.id,
                    name:item.partsName
                })
            })
        },
         afterRead(file) {
            // 此时可以自行将文件上传至服务器
            this.file=file.file
            console.log(this.file);
         },
    },
    created(){
        this.getQualityListAll();
        this.getPartsListAll();
    }
}
</script>

<style lang="less" scoped>
    /deep/ .app-nav-bar{
        background-color: #3296fa;
        .van-nav-bar__title{
            color: #fff;
        }
        .van-icon{
            color: #fff;
        }
    }
    /deep/ .van-uploader{
        width: 100%;
        .van-uploader__wrapper{
            width: 100%;
            .van-uploader__input-wrapper{
                width: 100%;
            }
        }
    }
</style>